<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/layout.css">
    <style>
        a:visited {
            color: #2E67C7;
        }

        a:hover {
            color: #2E67C7;
        }

        /* 中间背景图片 */
        .login-body {
            width: 980px;
            height: 400px;
            background: url(./images/login_bg.gif) no-repeat;
        }

        /* 空格占位 */
        .body-head {
            width: 100%;
            height: 40px;
        }

        /* 左半部样式 */
        .body-left {
            width: 489px;
            height: 360px;
            float: left;
            border-right: 1px solid #D6D6D6;
        }

        /* 会员登录图片 */
        .body-left img {
            position: relative;
            left: 30px;
        }

        /* 右半部样式 */
        .body-right {
            width: 50%;
            height: 370px;
            float: right;
            position: relative;
        }

        /* 输入框样式 */
        .body-input {
            width: 150px;
        }

        .body-box {
            width: 100px;
            height: 20px;
        }

        /* 登录按钮 */
        .left-img {
            width: 83px;
            height: 34px;
            background: url(images/login.gif) no-repeat;
            margin: 5px 205px;
        }

        .left-img:hover {
            background: url(images/login_mouseover.gif) no-repeat;
        }

        /* 左边文档 */
        .left-text {
            margin-top: 20px;
            margin-left: 120px;
        }

        /* 右边注册会员 */
        .right-header {
            width: 63px;
            height: 15px;
            background: url(images/register.gif);
            margin-left: 65px;
            margin-top: 20px;
        }

        /* 右侧文档 */
        .right-body {
            width: 300px;
            height: 160px;
            margin-left: 85px;
        }

        /* 文档图片 */
        .right-body-img {
            background: url(images/icon.gif) no-repeat;
            height: 30px;
            width: 35px;
            position: relative;
            display: inline-block;
            top: 13px;
            left: 5px;
        }

        #img1 {
            background-position: 0 -128px;
        }

        #img2 {
            background-position: 0 -170px;
        }

        #img3 {
            background-position: 0 -210px;
        }

        #img4 {
            background-position: 0 -245px;
        }

        .right-body-text {
            font-weight: bold;
            color: #0099FF;
        }

        .right-img {
            width: 160px;
            height: 37px;
            background: url(images/registernow.gif);
            margin-left: 145px;
            margin-top: 5px;
        }

        /* 右侧橙色文本框 */
        .right-footer {
            width: 300px;
            height: 80px;
            background-color: #FDF7E7;
            border: 1px solid #F2BB6F;
            margin-left: 85px;
            margin-top: 15px;
        }

        .footer-text {
            width: 260px;
            height: 30px;
            background-color: white;
            border: 1px solid #F5DCBC;
            margin: 5px 20px;
            text-align: center;
        }
        /* 橙色文本框图片 */
        .footer-top-img {
            width: 20px;
            height: 20px;
            background: url(images/icon.gif) no-repeat;
            display: inline-block;
            position: relative;
            top: 2px;
        }

        #fotter-img1 {
            background-position: -20px -279px;
        }

        #fotter-img2 {
            background-position: -22px -319px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <iframe src="header.html" frameborder="0" style="width: 980px;"></iframe>
        </div>
        <div class="login-body">
            <div class="body-head"></div>
            <div class="body-body">
                <div class="body-left">
                    <img src="images/title_login_2.png" alt="">
                    <table>
                        <tr>
                            <th>
                                <div class="body-box"></div>
                            </th>
                            <th>会员名:</th>
                            <th><input class="body-input" type="text"></th>
                            <th>(可包含a-z、0-9和下划线)</th>
                        </tr>
                        <tr>
                            <th>
                                <div class="body-box"></div>
                            </th>
                            <th>密码:</th>
                            <th><input class="body-input" type="password"></th>
                            <th style="position: relative;right: 25px;">(至少包含6个字符)</th>
                        </tr>
                    </table>
                    <div class="left-img"></div>
                    <div class="left-text">
                        <ul>
                            <li><a href="">什么是安全登录</a>。</li>
                            <li>香港会员（繁体中文用户）由此<a href="">登入</a></li>
                            <li><a href="">密码安全贴士。</a></li>
                            <li>防止病毒或者木马窃取您的账户信息，<a href="">在线检查</a>
                                您的电脑是否安全。</li>
                        </ul>
                    </div>
                </div>
                <div class="body-right">
                    <div class="right-header"></div>
                    <div class="right-body">
                        <ul>
                            <li>
                                <span class="right-body-img" id="img1"></span>
                                <span class="right-body-text">便宜有好货！</span>
                                超过7000万件商品任您选。
                            </li>
                            <li>
                                <span class="right-body-img" id="img2"></span>
                                <span class="right-body-text">买卖更安全！</span>
                                交易超安全。
                            </li>
                            <li>
                                <span class="right-body-img" id="img3"></span>
                                <span class="right-body-text">免费开网店！</span>
                                轻松赚钱交友。
                            </li>
                            <li>
                                <span class="right-body-img" id="img4"></span>
                                <span class="right-body-text">超人气社区！</span>
                                精彩活动每一天
                            </li>
                        </ul>
                    </div>
                    <div class="right-img"></div>
                    <div class="right-footer">
                        <div class="footer-text">
                            <span class="footer-top-img" id="fotter-img1"></span>
                            <span>您已经是会员？<a href="">由此登入</a></span>
                        </div>
                        <div class="footer-text">
                            <span class="footer-top-img" id="fotter-img2"></span>
                            <span>繁体中文用户由此<a href="">注册</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <iframe src="footer.html" frameborder="0" style="width: 980px;height: 163px;"></iframe>
        </div>
    </div>
</body>

</html>